<template>
	<div class="main">
	
	    <div class="header">
	        <div class="header-center fl">
	            <div class="header-title">
	                登录界面
	            </div>
	            <div class="header-img"></div>
	        </div>
	        <div class="header-bottom fl"></div>
	
	    </div>
	
	    <div class="content">
	        <div class="content-left">
	            <!--<img src="images/d.png" alt="">-->
	        </div>
	        <div class="content-right">
	            <div class="right-infp">
	                <div class="right-infp-name">
	
	                    <input type="text" name="username" placeholder="请输入账号" maxlength="12" required="" value="" autocomplete="off">
	                </div>
	                <div class="right-infp-name">
	                    <input type="password" name="name" placeholder="请输入密码" autocomplete="off">
	                </div>
	
	                <div class="right-infp-btn">
						<!-- <span style="margin-right: 5px;"><a-spin /></span> -->
	                    <button class="btn" @click="loginEven">  登录</button>
	                </div>
	            </div>
	        </div> 
	    </div>
	
	
	</div>
	
	
</template>

<script>
	export default{
		created() {
			
		},
		updated() {
		
		},
		methods:{
			loginEven(){
				 this.$message
				        .loading('正在登陆..', 0)
				        .then(() => this.$message.success('Loading finished', 2.5))
				        .then(() => this.$message.info('Loading finished is finished', 2.5));
				
				
			}
		},
		mounted() {
			
		}
		
		
	}
	
</script>

<style>
	*{
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box}
	*,body{padding:0px;	margin:0px;/*font-family: "微软雅黑";*/}
	body{
	    background-size: cover;
	    font-size: .16rem;
	    position: relative;
	    width: 100%;
	    height: 100%;
	}
	.main{
		background: url("../images/bj.jpg") no-repeat ;
	    margin: 0 auto;
	    width: 100vw;
	    height: 100vh;
	    position: relative;
	}
	
	/*头部*/
	.header{
	    width: 100%;
	    height: 1.5rem;
	    /*background: red;*/
	
	}
	
	.header .header-center{
	    width: 50%;
	    height: 1.2rem;
	    position: relative;
	    margin: 0 auto;
	}
	.header .header-center .header-title{
	    text-align: center;
	    color: #ffffff;
	    font-size: .4rem;
	    text-shadow: 0 0 .3rem #00d8ff;
	    line-height: 1.05rem;
	}
	.header .header-img{
	    background: url("../images/head.gif") no-repeat center center;
	    background-size: 100%;
	    height: 100%;
	    width: 100%;
	    position: absolute;
	    top: .8rem;
	}
	
	.content{
	    width: 12rem;
	    height: 7rem;
	    /*background: green;*/
	    margin: 1rem auto 0 auto;
	    /*border: 1px solid green;*/
	}
	.content .content-left{
	    width:6.2rem ;
	    height: 5.8rem;
	    /*border: 1px solid red;*/
	    background: url("../images/d.png") no-repeat;
	    background-size: 100% 100%;
	    padding: 0.4rem 0;
	    box-sizing: border-box;
	    margin-right: 2%;
	    float: left;
	}
	@-webkit-keyframes rotation {
	    from {
	        -webkit-transform: rotate(0deg);
	    }
	    to {
	        -webkit-transform: rotate(360deg);
	    }
	}
	
	.content .content-left {
	    -webkit-transform: rotate(360deg);
	    animation: rotation 15s linear infinite;
	    -moz-animation: rotation 15s linear infinite;
	    -webkit-animation: rotation 15s linear infinite;
	    -o-animation: rotation 15s linear infinite;
	}
	
	.content .content-right{
	    width:5.4rem ;
	    height: 5.8rem;
	    background: url("../images/e.png") no-repeat;
	    background-size: 100% 100%;
	    float: right;
	    position: relative;
	
	}
	.right-infp{
	    width: 4rem;
	    height: 3rem;
	    margin: auto auto;
	   /* border: 1px solid red;*/
	    vertical-align: center;
	    position: absolute;
	    top:1.6rem;
	    left: 0.9rem;
	}
	.right-infp-name{
	    background: url("../images/b.png") no-repeat;
	    width: 100%;
	    height: 0.5rem;
	    background-size: 100% 100%;
	    line-height:0.45rem;
	    margin-bottom: 0.4rem;
	    position: relative;
	}
	.right-infp-name input{
	    width: 85%;
	    border: none;
	    box-sizing: border-box;
	    height: 0.5rem;
		left: 0;
	    margin-left: 0.5rem;
	    line-height: 0.4rem;
	    background: none !important;
	    color: #00eaff;
	    padding-left: 0.15rem;
	    /*box-shadow: 0 0 1px #00eaff;*/
	    outline: none;
	    -webkit-tap-highlight-color:rgba(255,0,0,0);
	    position: absolute;
	
	
	}
	input::-webkit-input-placeholder {
	    color: #ccc; 
	}
	.right-infp-btn{
	    background: url("../images/a.png") no-repeat !important;
	    width: 100%;
	    height: 0.5rem;
	    background-size: 100% 100%;
	    line-height: 0.5rem;
	    margin-bottom: 0.4rem;
	    position: relative;
	}
	.right-infp-btn .btn{
	    width: 95%;
	    border: none;
	    box-sizing: border-box;
	    height: 0.45rem;
		left: 0;
	    margin-left: 0.1rem;
	    font-size: 0.22rem;
	    cursor: pointer;
	    background: none;
	    outline: none;
	    color: #fff;
	    position: absolute;
	
	
	}
	.right-infp-btn .btn:hover{
	
	}
</style>
